<template>
  <div class="container_edit">
    <div class="header">
      <p>推荐有礼管理>>推荐详情</p>
      <el-button
        type="primary"
        @click="back"
      >返回</el-button>
    </div>
    <div class="main">
      <div class="flex-box-align" style="text-align: center;width: 500px;">
        <div class="flex">推荐人：{{detail.userName}}</div>
        <div class="flex">推荐人数：{{detail.recommendCount}}</div>
      </div>
      <div style="margin-top: 50px;">
        <ul class="table-wrapper flex-box-align">
          <li>被推荐人</li>
          <li>推荐时间</li>
          <li>是否签约</li>
        </ul>
        <ul class="table-content">
          <li class="flex-box-align" v-for="(item, index) in detail.recordList" :key="index">
            <div>{{item.userName}}</div>
            <div>{{item.gmtCreated}}</div>
            <div>{{item.isSigning == 0 ?'否' : '是'}}</div>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  var searchService,map,markers = [];
  export default {
    data() {
      return {
        detail: {}
      };
    },
    created() {
    },
    mounted() {
      this.id = this.$route.query.id
      if (this.id) {
        this.getInfo();
      }},
    components: {
      "bg-editor": () => import("../common/bg-editor.vue")
    },
    methods: {
      getInfo: function() {
        let url = CONSTANT.URL.RECOMMEND.detail;
        common.get(url,this.id, res => {
          if (res.status == 200) {
            let data = res.data.bussData;
            this.detail = data;
          }
        });
      },
      back() {this.$router.back()}
    }
  };
</script>
<style lang="scss" scoped>
  .table-wrapper {
    li{
      text-align: center;
      width: 180px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
      font-weight: bold;
    }
  }
  .table-content {
    li {
      div {
        text-align: center;
        width: 180px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
      }
    }
  }
  #map_canvas {
    width:500px;
    height:500px;
  }
  .table-content {
    .table-item {
      position: relative;
      border: 1px solid #dcdfe6;
      i {
        position: absolute;
        right: -30px;
        top: 20px;
        cursor: pointer;
        font-size: 16px;
      }
      &:first-child {
        background-color: #409eff;
        color: #fff;
        border-right: 0px solid #dcdfe6;
        .table-list {
          padding: 0;
        }
      }

      .table-list {
        flex: 2;
        text-align: center;
        padding: 5px 0;
        .el-input {
          height: 70% !important;
          width: 90%;
        }
        &:first-child {
          flex: 3;
          border-right: 1px solid #dcdfe6;
        }
      }
    }
  }
</style>
